<template>
  <div>
    <el-cascader expandTrigger="hover" v-model="cataId" :options="cateList" :props="cateProps" @change="$emit('onSelect', cataId)" clearable> </el-cascader>
  </div>
</template>

<script>
export default {
  props: ['data', 'query', 'checkStrictly'],
  model: {
    prop: 'data',
    event: 'onSelect'
  },
  data() {
    return {
      cataId: [],
      cateList: [],
      cateProps: {
        checkStrictly: true,
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  created() {
    this.getCateList()
    if (!this.checkStrictly) this.cateProps.checkStrictly = false
  },
  methods: {
    //   获取整体分类数据
    async getCateList() {
      const { data: res } = await this.$axios({
        url: 'categories',
        method: 'GET',
        params: this.query
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      if (this.query) return (this.cateList = res.data.result)
      this.cateList = res.data
    }
  }
}
</script>

<style>
</style>